<template>
  <el-dialog width="600px" :title='showTitle' :visible="props.showDialog" @cancel="btnCancel">
    <el-form label-width="30%" :model="formData" :rules="menuRules" ref="confirm">
      <el-form-item label="上级菜单:" prop="superiorMenu">
        <el-input placeholder="请输入主菜单" class="narrow-input" v-model="formData.superiorMenu"></el-input>
      </el-form-item>

      <el-form-item label="菜单类别:" prop="menuCategory">
        <el-radio-group v-model="formData.menuCategory">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
          <el-radio :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示排序:" prop="orderSort"> 
        <el-input placeholder="点击选择排序" class="narrow-input" v-model="formData.orderSort"></el-input>
      </el-form-item>

      <el-form-item label="菜单图标:" prop="icon">
        <el-input placeholder="请选择图标" class="narrow-input" v-model="formData.icon"></el-input>
      </el-form-item>

      <el-form-item label="菜单名称:" prop="name">
        <el-input placeholder="请选择路由地址" class="narrow-input" v-model="formData.name"></el-input>
      </el-form-item>

      <el-form-item label="路由地址:" prop="routingAddress">
        <el-input placeholder="请选择路由地址" class="narrow-input" v-model="formData.routingAddress"></el-input>
      </el-form-item>

      <el-form-item label="显示状态:" prop="displayStatus">
        <el-radio-group v-model="formData.displayStatus">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="2">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="菜单状态:" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row type="flex" justify="center">
        <el-button class="footer" @click="btnCancel">取消</el-button>
        <el-button class="footer" type="primary" @click="btnConfirm">确认</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineEmits ,ref, computed} from 'vue'
import { ElMessage } from 'element-plus';
import {addMenuList ,editMenu} from '@/api/menuControl'
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})

// 定义新增数据
const formData = ref({
  id:null,
  superiorMenu:'',
  menuCategory:1,
  orderSort:null,
  icon:'',
  name:'',
  routingAddress:'',
  displayStatus:1,
  status:1,
  createTime:''
})

// 子传父 关掉弹层
const emits = defineEmits(['closeDialog','addMenuListAPI'])
const btnCancel = () => {
  emits('closeDialog', false)
  // props.value.showDialog=false
  confirm.value.resetFields()
}

// 校验规则
const menuRules = {
  name: [
    { required: true, message: '请输入菜单名', trigger: 'blur' },
    { min:1, max:12,message: '菜单名应为1-12个字符', trigger: 'blur' }
  ],
  routingAddress: [
    { required: true, message: '请输入路由地址', trigger: 'blur' },
    { min: 1, max: 50, message: '路由地址为1-50个字', trigger: 'blur' }
  ],
  
}

const editConfirm = (row) =>{
  formData.value = row
  console.log(formData.value)
  }

  // 暴露方法给父组件
  defineExpose({
    editConfirm
  })


  const showTitle = computed(() =>{
  return formData.value.id? '修改菜单':'新增菜单'
  
}) 

const confirm =ref(null)
  const btnConfirm = async() => {
if(formData.value.id){
  await editMenu(formData.value)
  await confirm.value.validate()
  ElMessage.success('修改成功')
  btnCancel()
}
else{
  await addMenuList(formData.value)
  ElMessage.success('新增成功')
  btnCancel()
}
emits('addMenuListAPI')
  }

</script>

<style lang="less" scoped>
.narrow-input {
  width: 300px;
}
</style>